<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI聊天助手</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 添加 Marked.js 用于解析 Markdown -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <!-- 添加 highlight.js 用于代码高亮 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.min.css">
  <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/highlight.min.js"></script>
  <style>
    .typing-indicator::after {
      content: '';
      animation: typing 1.5s infinite;
    }
    @keyframes typing {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
    }
    .message-textarea {
      resize: none;
      min-height: 80px;
    }
    
    /* Markdown 样式 */
    .markdown-body {
      line-height: 1.6;
    }
    .markdown-body p {
      margin-bottom: 0.5em;
    }
    .markdown-body pre {
      background-color: #f6f8fa;
      border-radius: 6px;
      padding: 16px;
      margin: 8px 0;
    }
    .markdown-body code {
      font-family: monospace;
      padding: 2px 4px;
      background-color: #f6f8fa;
      border-radius: 4px;
    }
    .markdown-body pre code {
      padding: 0;
      background-color: transparent;
    }
    
    /* 自定义滚动条样式 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #c5c5c5;
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }
    
    /* 聊天气泡动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .message-animation {
      animation: fadeIn 0.3s ease-out forwards;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
  <div class="container mx-auto max-w-4xl p-4">
    <!-- Header -->
    <header class="flex justify-between items-center mb-6 bg-white rounded-xl shadow-md p-4">
      <div class="flex items-center">
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
          </svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-800">AI聊天助手</h1>
        <div class="ml-4">
          <label for="modelSelect" class="mr-2 text-gray-700 font-medium">选择模型</label>
          <select id="modelSelect" class="border border-gray-300 rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
            <!-- 选项将通过JavaScript动态添加 -->
          </select>
        </div>
      </div>
      <button id="newChatBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors shadow-md flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        创建新对话
      </button>
    </header>

    <!-- Chat Container -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-4 h-[500px] overflow-y-auto" id="chatContainer">
      <div class="flex flex-col space-y-4" id="messagesContainer">
        <!-- Initial greeting will be added by script.js -->
      </div>
    </div>

    <!-- Input Area -->
    <form id="chatForm" class="bg-white rounded-xl shadow-md p-4">
      <div class="flex">
        <textarea 
          id="messageInput" 
          class="w-full border border-gray-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none mb-3" 
          placeholder="在这里输入您的消息..."
          rows="3"
        ></textarea>
      </div>
      <div class="flex justify-end">
        <button 
          type="submit" 
          id="sendButton" 
          class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors shadow-md flex items-center"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
          发送
        </button>
      </div>
    </form>
  </div>

  <script>
    // 配置 marked.js
    marked.setOptions({
      highlight: function(code, lang) {
        if (lang && hljs.getLanguage(lang)) {
          return hljs.highlight(code, { language: lang }).value;
        }
        return hljs.highlightAuto(code).value;
      },
      breaks: true
    });
  </script>
  <script src="script.js"></script>
  <script>
    // 模型选择功能
    document.addEventListener('DOMContentLoaded', async () => {
      // 等待config加载完成
      while (!config) {
        await new Promise(resolve => setTimeout(resolve, 100));
      }
      
      const modelSelect = document.getElementById('modelSelect');
      
      // 获取当前页面配置
      const pageConfig = config.page_config[currentPage] || config.page_config['chat.html'];
      const defaultApi = pageConfig.default_api;
      const availableApis = pageConfig.available_apis || [];
      
      // 填充下拉菜单选项，仅包含可用的API
      if (availableApis.length > 0) {
        for (const apiName of availableApis) {
          if (config.api_config[apiName]) {
            const apiDetails = config.api_config[apiName];
            const option = document.createElement('option');
            option.value = apiName;
            option.textContent = `${apiName} (${apiDetails.model})`;
            option.selected = apiName === defaultApi;
            modelSelect.appendChild(option);
          }
        }
      } else {
        // 如果没有指定可用API，则默认使用当前API
        const option = document.createElement('option');
        option.value = defaultApi;
        option.textContent = `${defaultApi} (${config.api_config[defaultApi].model})`;
        option.selected = true;
        modelSelect.appendChild(option);
      }
      
      // 添加模型切换事件监听器
      modelSelect.addEventListener('change', (e) => {
        const selectedApi = e.target.value;
        currentApiConfig = config.api_config[selectedApi];
        console.log(`已切换到 API: ${selectedApi}, 模型: ${currentApiConfig.model}`);
        
        // 添加系统消息提示用户已切换模型
        addSystemMessage(`已切换到 ${selectedApi} 模型: ${currentApiConfig.model}`);
      });
    });
  </script>
</body>
</html>